<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title>style和class的区别</title>
<style>
    #div1{
   	  width:200px;height:200px;border:1px solid black;
    }
    .box{
    	background:red;
    }
</style>
<script>
    function toRed(){
    	var oDiv = document.getElementById('div1');
    	oDiv.className = 'box';
    }
    
    //这里说明一点，样式优先级：*<标签<class<id<行间样式
    //style就是样式，最高级，所以当先执行toRed()再执行toGreen()没有问题
    //反过来先执行toGreen()再执行toRed()样式颜色不会改变，仍然是绿色
    
    function toGreen(){
    	var oDiv = document.getElementById('div1');
    	oDiv.style.background = 'green';
    }
</script>
</head>
<body>
    <input type="button" value="变红" onclick="toRed()"/>
    <input type="button" value="变绿" onclick="toGreen()"/>
    <div id="div1"></div>

</body>
</html>












































